<template>
	<!-- <view style="width: 100vw;height: 100vh;position: relative;overflow: auto;"> -->
<view class="">
	
		<!-- 显示数据 -->
		<!-- 		<view v-for="(item, index) in dataInfo" :key="index">
			{{ item }}
		</view> -->

		<!-- 表单组件 -->
		<uni-forms class="formValue" style="overflow: auto;" :modelValue="formData" :rules="rules" label-position="top"
			ref="form" label-width="auto">
			<view style="height: 35rpx;">

			</view>
			<!-- 用人单位名称输入项 -->
			<uni-forms-item label="用人单位名称：" name="applyInstitution" v-if="type<2">
				<uni-easyinput type="text" v-model="formData.applyInstitution" />
			</uni-forms-item>

			<!-- 社会信用代码输入项 -->
			<uni-forms-item label="用人单位统一社会信用代码：" name="idCard" v-if="type<2">
				<uni-easyinput type="text" v-model="formData.idCard" />
			</uni-forms-item>
			<view class="text8class" v-if='formData.idCard.charAt(0) == 8'>
				* 您所填写的统一社会信用代码为工会组织统一社会信用代码，如您有工会组织统一社会信用代码，请从数字身份卡包申领组织证
			</view>
			<!-- 所在行政区划选择项 -->
			<uni-forms-item label="所在行政区划：" name="applyRegion" required class="rigthTitel">
				<view class="rigthTitel-data">用于入驻审批，请准确填写</view>
				<uni-data-picker placeholder="请选择所在行政区划" :map="provinceCityAreaDataObj"
					:localdata="provinceCityAreaData" v-model="formData.applyRegion" />
			</uni-forms-item>

			<!-- 基层工会名称输入项 -->
			<uni-forms-item label="入驻基层工会名称：" name="enrollUnionName" class="rigthTitel">
				<view class="rigthTitel-data">用于入驻审批，请准确填写</view>
				<uni-easyinput type="text" v-model="formData.enrollUnionName" />
			</uni-forms-item>

			<!-- 基层工会类型选择项 -->
			<uni-forms-item label="基层工会类型：" name="applyType">
				<uni-data-select v-model="formData.applyType" :localdata="range" @change="handleTypeChange" />
			</uni-forms-item>

			<!-- 上级工会名称输入项 -->
			<uni-forms-item label="上级一工会名称：" name="parentUnionName">
				<uni-easyinput v-model="formData.parentUnionName" placeholder="请输入一上级工会名称" @focus="handleFocus" />
			</uni-forms-item>

			<!-- 建会日期选择项 -->
			<uni-forms-item label="建会日期：" name="foundDate">
				<uni-datetime-picker type="date" :value="formData.foundDate" @change="handleDateChange" />
			</uni-forms-item>
		</uni-forms>


		<!-- 弹窗组件 -->
		<uni-popup ref="popups" background-color="#fff">
			<view class="popup-content-data">
				<treeUnionComponentsVue @selectUnionRow="selectUnionRows" />
			</view>
		</uni-popup>


		<!-- 操作按钮 -->
		<view class="btn1 flex buttonPoast">
			<button class="button flex1 margin20" @click="navigateToSettlement">
				上一步
			</button>
			<button class="button flex1" @click="handleNextStep">
				下一步
			</button>
		</view>
	</view>
</template>

<script>
	import treeUnionComponentsVue from '@/components/treeUnionComponents.vue'
	import {
		getCityList
	} from '@/api/system/city';
	import {
		getPagesToken,
		setPagesToken
	} from '@/utils/auth';
	import {
		getDictsList
	} from '@/api/system/dicts';
	import {
		cardPacksOrganizeStays
	} from '../../utils/newView';


	export default {
		onLoad(option) {
			console.log(option);
			this.type = Number(option.type)
		},
		watch: {
			'formData.idCard': {
				handler(newVal) {
					if (newVal && newVal.charAt(0) == 8) {
						uni.showModal({
							title: '提示',
							content: '是否前往数字卡包入驻页？',
							success: function(res) {
								if (res.confirm) {
									cardPacksOrganizeStays()

								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				},
			}
		},
		data() {
			return {
				type: null,
				visible: false,
				range: [],

				provinceCityAreaDataObj: {
					text: 'name',
					value: 'id'
				},
				provinceCityAreaData: [],
				dataInfo: [],
				formData: {
					applyInstitution: "",
					idCard: "",
					applyRegion: "",
					enrollUnionName: "",
					applyType: "",
					parentUnionId: null,
					parentUnionName: null,
					foundDate: "",
				},
				rules: {
					applyInstitution: {
						rules: [{
							required: true,
							errorMessage: '用人单位名称不能为空'
						}]
					},
					idCard: {
						rules: [{
								required: true,
								errorMessage: '社会信用代码不能为空',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									const isSocialCode = (socialCode) => {
										const reg = /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/;
										return reg.test(socialCode);
									};

									if (!isSocialCode(value)) {
										callback('社会信用代码格式不正确');
									} else {
										callback();
									}
								}
							}
						]
					},
					applyRegion: {
						rules: [{
							required: true,
							errorMessage: '行政区划不能为空'
						}]
					},
					enrollUnionName: {
						rules: [{
							required: true,
							errorMessage: '基层工会名称不能为空'
						}]
					},
					applyType: {
						rules: [{
							required: true,
							errorMessage: '基层工会类型不能为空'
						}]
					},
					parentUnionName: {
						rules: [{
							required: true,
							errorMessage: '上级工会名称不能为空'
						}]
					},
					foundDate: {
						rules: [{
							required: true,
							errorMessage: '建会日期不能为空'
						}]
					}
				}
			};
		},
		components: {
			treeUnionComponentsVue
		},
		onShow() {
			this.fetchCityList();
			// this.loadUserInfo();
			this.getDict()
		},
		methods: {
			// 返回值为true或false
			isSocialCode(socialCode) {
				const reg = /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/;
				return reg.test(socialCode);
			},

			getDict() {
				getDictsList('trade_union_type').then(res => {
					console.log(res);
					this.range = res.data.map(item => {
						return {
							...item,
							text: item.dictLabel,
							value: item.dictValue
						}
					})
				}).catch(err => {
					console.log(err);
				})
			},
			// // 获取用户信息
			// loadUserInfo() {
			// 	const {
			// 		platform
			// 	} = uni.getSystemInfoSync();
			// 	const isMobile = platform === 'ios' || platform === 'android';
			// const isMobile = true
			// 	const credentials = 'PhoneNumberCredential&UnionCredential&OrgMemberCredential';

			// 	this.userTopAuth(isMobile, credentials)
			// 		.then(res => {
			// 			this.setFormData(res);
			// 		})
			// 		.catch(err => {
			// 			this.setFormData(err);
			// 		});
			// },

			// setFormData(data) {
			// 	this.dataInfo.push(data);
			// 	// this.formData = {
			// 	// 	...data
			// 	// };
			// },

			// 选择工会行
			selectUnionRows(row) {

				this.formData.parentUnionName = row.name;
				this.formData.parentUnionId = row.id;
				this.$refs.popups.close();
			},

			// 打开弹窗
			handleFocus() {
				this.$refs.popups.open();
			},

			// 获取城市列表
			fetchCityList() {
				getCityList().then(res => {
					this.provinceCityAreaData = res.data;
				});
			},

			// 返回上一步
			navigateToSettlement() {
				this.$tab.navigateTo(`/pages/work/unionsettlement`);
			},

			// 表单验证并处理下一步
			handleNextStep() {
				this.$refs.form.validate()
					.then(() => {
						const existingData = getPagesToken('OrganizationalForm');

						const updatedData = {
							...existingData,
							...this.formData
						};

						setPagesToken('OrganizationalForm', updatedData);

						this.$tab.navigateTo(`/pages/work/unionsettlement-form-next`);

					})
					.catch(errors => {
						console.error(errors);
					});
			},

			// 日期选择处理
			handleDateChange(e) {
				this.formData.foundDate = e; // 根据实际返回值调整
			},

			// 类型选择处理
			handleTypeChange(e) {
				this.formData.applyType = e; // 根据实际返回值调整
			},

			open() {
				this.visible = true;
			},

			confirm(val) {
				this.formData.applyRegion = val.name;
				this.visible = false;
			},

			cancel() {
				this.visible = false;
			}
		}
	}
</script>



<style lang="scss" scoped>
	.buttonPoast {
		position: fixed;
		width: 90%;
		left: 50%;
		transform: translateX(-50%);
	}


	.uni-calendar-item--checked {
		background-color: #f56c6c;
	}

	.formValue {
		position: relative;
		overflow: auto;
	}

	.text8class {
		color: #f56c6c;
		font-size: 22rpx;
		text-indent: 1em;
		background-color: #ffe9e9;
		padding: 15rpx 10rpx;
		border-radius: 15rpx;
		margin-top: -25rpx;
		margin-bottom: 12rpx;
	}


	.popup-content-data {
		width: 100vw;
		height: 100vh;
	}

	.rigthTitel {
		position: relative;
	}

	.rigthTitel-data {
		position: absolute;
		right: 0;
		top: -49upx;
		color: rgba(189, 26, 45, 1);
		text-align: right;
		vertical-align: top;
		font-size: 12px;
	}

	::v-deep .uni-forms {
		padding: 0 32rpx 16rpx;
		background-color: #fff;

	}
</style>